<template>
	<div class="container" style="height: 100%;">
		<div class="left">
			<el-card style="width: 100%; height: 120%; border-radius: 10px">
				<div style="font-size: 14px" class="card">
					<div class="card_header">
						<span>关于用户</span>
					</div>
					<div class="card_body">
						<el-image style="width: 150px; height: 150px; border-radius: 10px" :src="InfoAll?.img" fit="fit" />
					</div>
					<div class="card_footer">
						<!-- 模板语法 -->
						<!-- obj.属性这种属于对象类型

							grildfriend = {
								name:'123',
								age:18,
								sex:'女'
							}
							grildfriend.age;
							//18
						 -->
						<span>{{ InfoAll?.type }}</span
						><br />
						<span>{{ InfoAll?.studentcard }}</span>
					</div>
				</div>
			</el-card>
		</div>
		<div class="right">
			<el-card style="width: 100%; height: 100%;overflow: auto;">
				<el-tabs v-model="activeName" class="demo-tabs" style="margin: 20px">
					<div class="tab_content">
						<div style="width: 70%;">
							<el-tab-pane label="用户信息" name="Info">
								<!-- 用户信息 -->
								<!-- 双向绑定
									a = b;

								 -->
								<el-form label-position="top" label-width="auto" :rules="rules" :model="formLabelAlign" style="max-width: 500px">
									<el-form-item label="用户名" prop="name">
										<el-input v-model="formLabelAlign.name" :disabled="isEdit" />
									</el-form-item>
									<el-form-item label="密码" prop="password">
										<el-input v-model="formLabelAlign.password" :disabled="isEdit" />
									</el-form-item>
									<el-form-item label="院系" prop="region">
										<el-input v-model="formLabelAlign.region" :disabled="isEdit" />
									</el-form-item>
									<el-form-item label="联系电话" prop="tel">
										<el-input v-model="formLabelAlign.tel" :disabled="isEdit" />
									</el-form-item>
									<el-form-item label="班级" prop="class">
										<el-input v-model="formLabelAlign.class" :disabled="true" />
									</el-form-item>
									<el-form-item label="邮箱" prop="email">
										<el-input v-model="formLabelAlign.email" :disabled="isEdit" />
									</el-form-item>
									<el-form-item label="性别" prop="sex">
										<el-radio-group v-model="formLabelAlign.sex" class="ml-4" :disabled="isEdit">
											<el-radio :label="0" size="large">男</el-radio>
											<el-radio :label="1" size="large">女</el-radio>
										</el-radio-group>
									</el-form-item>

									<el-form-item>
										<el-button @click="isEdit = false">编辑</el-button>
										<el-button type="primary" @click="onSubmit">保存</el-button>
									</el-form-item>
								</el-form>
							</el-tab-pane>
						</div>
						<div class="upLoad" style="width:28%">
							<el-upload 
							action="http://localhost:3005/api/upload" 
							list-type="picture-card" :auto-upload="true" 
							:limit="1" name="img"
							:on-success="changeSuccess"
							>
								<p><el-icon><Plus /></el-icon></p>
								<template #file="{ file }">
									<div>
										<img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
										<span class="el-upload-list__item-actions">
											<span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
												<el-icon><zoom-in /></el-icon>
											</span>
											<!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
												<el-icon><Download /></el-icon>
											</span> -->
											<!-- <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
												<el-icon><Delete /></el-icon>
											</span> -->
										</span>
									</div>
								</template>
							</el-upload>

							<el-dialog v-model="dialogVisible">
								<!-- 单向数据绑定 -->
								<img w-full :src="imgUrl" alt="Preview Image" style="width: 100%;height: 100%" />
							</el-dialog>
						</div>
					</div>
				</el-tabs>
			</el-card>
		</div>
	</div>
</template>

<script setup name="flowChart">
import { ref, onMounted, reactive } from "vue";
import { LoginInfo ,updateInfo} from "@/api/student/home";
import { ElNotification } from 'element-plus'
import { GlobalStore } from "@/stores";
const globalStore = GlobalStore();
const activeName = ref("Info");
const InfoAll = ref({});
const isEdit = ref(true);
const formLabelAlign = reactive({
	name: "",
	password: "",
	region: "",
	tel: "",
	sex: 0,
	class:'',
	email:''
});
// 规则
const rules = reactive({
	name: [{ required: true }],
	password: [{ required: true }],
	region: [{ required: true }],
	tel: [{ required: true }],
	sex: [{ required: true }],
	class: [{ required: true }],
	email: [{ required: true }]
	// img:[{required:true}]
});
const getInfoAll = async () => {
	try {
		const res = await LoginInfo({id:globalStore.userInfo.id});
		debugger
		if (res.data.code === 200) {
			InfoAll.value = res.data.data[0];
			formLabelAlign.name = res.data.data[0].username;
			formLabelAlign.password = res.data.data[0].password;
			formLabelAlign.region = res.data.data[0].profession;
			formLabelAlign.tel = res.data.data[0].tel;
			formLabelAlign.sex = Number(res.data.data[0].sex);
			formLabelAlign.class = res.data.data[0]?.studentcard.slice(0,6)
			formLabelAlign.email = res.data.data[0]?.email
			// console.log(InfoAll.value)
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 图片上传-----------------------------------------
const dialogVisible = ref(false);
const dialogImageUrl = ref('')
const disabled = ref(false);
const imgUrl = ref('')
const changeSuccess= (response)=>{
	const {code,url} = response;
	if(code === 200){
		imgUrl.value = url;
		ElNotification({
			message: "图片上传成功 ",
			type: "success",
			duration: 2000
		});
	}else{
		ElNotification({
			message: "图片上传失败 ",
			type: "error",
			duration: 1000
		});
	}
}
const handlePictureCardPreview = file => {
	dialogImageUrl.value = !imgUrl.value;
	dialogVisible.value = true;
};
// 移出
const handleRemove = (file)=>{
	console.log(file)
}
const onSubmit =async ()=>{
	formLabelAlign.img = imgUrl.value;
	formLabelAlign.id = globalStore.userInfo.id;
	try {
		const res = await updateInfo(formLabelAlign );
		if (res.data.code === 200) {
			globalStore.userInfo.img = imgUrl.value;
			getInfoAll()
			ElNotification({
				message: "保存成功 ",
				type: "success",
				duration: 3000
			});
		} else {
			ElNotification({
				message: "保存失败 ",
				type: "error",
				duration: 1000
			});
		}
	} catch (error) {
		console.log(error);
	}
}


// ------------------------------------------
onMounted(() => {
	getInfoAll();
});
</script>
<style scoped lang="scss">
.container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	.left {
		width: 20%;
		height: 300px;
		// border: 1px solid red;
		.card {
			// margin-top: 20px;
			border: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			.card_body {
				margin: 5px 0px;
			}
		}
	}
	.right {
		width: 70%;
		height: 95%;
		display: flex;
		justify-content: space-between;
		// align-items: center;
		// border: 1px solid darkblue;
		// overflow: auto;
		.tab_content{
			display: flex;
		justify-content: space-between;
		}
	}
}
.demo-tabs > .el-tabs__content {
	padding: 32px;
	color: #6b778c;
	font-size: 32px;
	font-weight: 600;
}
</style>
